<template>
	<view class="m-income">
		<u-empty
			:class="['m-income-empty']"
			v-if="!list.length"
			icon="/static/images/projectDetail/no-data.png"
			text="暂无记录~"
			size="40" >
		</u-empty>
		<view :class="['m-income-item',pageData.msg?'cup m-income-item-msg':'']" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
			<view class=" flex-between-nowrap fz16 m-income-top fwb">
				<view class="flex-start-nowrap m-income-title" >
					<view class="posr">
						<u-icon style="margin-top: 4px;" name="/static/images/income/ld.png" size="16"></u-icon>
						<u-badge v-if="item[item.statusKey || 'status'] == 0" :class="['dot']" :isDot="true" :customStyle="{width:'5px',height:'5px', right:'-3px'}"></u-badge>
					</view>
					<view class="plr10 flex-start-wrap" >
						<view class="breakword" v-html="item.title"></view>
						<!-- <view class="" style="width: calc(100% - 50px);" v-if="item.title &&  item.title.indexOf('<') >-1">
							<jyf-parser :html="item.title" :ref="'article' + index"></jyf-parser>
						</view>
						<text v-else  style="width: calc(100% - 50px);"  :class="[item.hasOwnProperty('status') && 'cff7']">{{item.title}}</text> -->
						<text v-if="pageData.msg"  :class="[
							item.status == 0 && 'detail',
							item.status == 1 && 'success',
						]">
							【{{item.status == 0?'未读':'已读'}}】
						</text>
						<!-- {{item.balance_remark}} -->
					</view>
				</view>
				<text :class="['cf8 m-income-money',item.business_type == 5 ?'error' :'']" v-if="item.balance_remark || item.desc">
				{{(item.business_type == 5 || item.business_type == 6)? item.desc.replace('+','-') :item.balance_remark || item.desc}}</text>
			</view>
			<view class="m-income-time flex-between-nowrap" >
				<text class="fz14">{{item.time || (item.created_at ? dateFormat(item.created_at) :'')}}</text>
				<!--     "status": 0,//状态，0：审核中 ，1：已通过，2：审核不通过 -->
				<view
				v-if="item.hasOwnProperty('status') && !item.msg"
				:class="['fz16 cup fwb m-income-detail flex-start-nowrap alic',
				item.status == 0 && 'detail',
				item.status == 1 && 'success',
				(item.status == 2) && 'error',
				]" @click.stop="clickDetail(item)">
					<u-icon v-if="item.status == 0" name="/static/images/income/detail.png" color="#FF7224" size="14"></u-icon>
					<u-icon v-if="item.status == 1" name="checkmark-circle" color="#67C23A" size="16"></u-icon>
					<u-icon v-if="item.status == 2" name="close-circle" color="#FF3B30" size="16"></u-icon>
					<text class="pl6">查看详情</text>
				</view>
			</view>
		</view>
		<!-- <view class="title">显示分页信息</view> -->
		<view class="pd30" v-if="page.total > page.page_size">
			<page-pagination @change="goPage" :total="page.total" :pageSize="page.page_size" :showAround="true"></page-pagination>
		</view>
		
	</view>
</template>

<script>
	import {
		dateFormat
	} from "@/utils/index.js"
	export default {
		name:"m-income",
		props:{
			list:{
				type:Array,
				default:()=>[]
			},
			pageData:{
				type:Object,
				default:()=>{}
			},
			
		},
		watch:{
			list(){
			},
			page(val){
				
			},
		},
		data() {
			return {
				showDetail:true,
				page:{
					total:0,
					page_size:10,
				}
			};
		},
		mounted() {
			uni.setNavigationBarTitle({
				title:'我的收入' +'-宅小职'
			})
			this.page = this.pageData || {}
		},
		methods:{
			// 格式化时间
			dateFormat(val) {
				return dateFormat(val)
			},
			goDetail(item){
				if(this.pageData.msg){
					this.$emit('clickDetail',item)
				}
			},
			clickDetail(item){
				this.$emit('clickDetail',item)
			},
			goPage(val){
				this.$emit('goPage',val)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.cf8{
		color: #F8C632;
	}
	.detail{
		color: #FF7224;
	}
	.success{
		color: #67C23A;
	}
	.error{
		color: #FF3B30;
	}
	.fwb{
		font-weight: bold;
	}
	.pl6{
		padding-left: 6rpx;
	}
	.plr10{
			padding: 0 5px;
	}
	.breakword{
		word-break: break-all;
	}
	.m-income{
		&-empty{
			padding-top: 30px;
		}
		&-top{
			
		}
		&-title{
			align-items: flex-start;
		}
		&-money{
		}
		&-item{
			padding: 12px 0;
			border-bottom: 1px solid #d6d7d9;
		}
		&-item-msg{
			.cff7{
				color:#333;
			}
		}
		&-item:last-child{
			border:none;
		}
		&-time{
			color: #979EAA;
			margin-top: 10px;
			padding-left: 20px;
			font-family: 'PingFang-SC-Medium';
		}
	}
	@media screen and (min-width: 0px) and (max-width:750px){
		.m-income{
			&-top{
				font-size: 28rpx;
				
			}
			&-title{
			}
			&-money{
				width: 200rpx;
				text-align: right;
			}
			&-detail{
				font-size: 28rpx;
			}
		}
		
	}
</style>